<script>
    import {CardList} from './card'
    export default {
        data() {
            return {
                CardList,
            }
        },
        components: {},
        methods: {},
        mounted(){},
        created() {}
    }
</script>
<template>
    <div class="Balance">
        <div class="balancetop">
            <div class="balancelabel">
                <img class="labelimg" src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/balance/%E4%BD%99%E9%A2%9D%402x.png" alt="">
                <span class="label">我的余额<span class="labeldes">(元)</span></span>
            </div>
            <span class="money">256.30</span>
            <div class="detailarea">
                <span class="detaillabel">查看明细</span>
                <img class="righticon" src="/static/images/right.png" alt="">
            </div>
        </div>
        <div class="balancebottom">
            <span class="bottomlabel">会员充值</span>
            <div class="cardlist" v-for="(v,i) in CardList" :key="i">
                <img class="cardicon" :src="v.icon" alt="">
                <div class="cardbox">
                    <div class="carddesArea">
                        <span class="cardlabel">{{v.label}}</span>
                        <span class="cardDes">{{v.cardDes}}</span>
                    </div>
                    <div class="cardbtnarea">
                        <span>立即</span>
                        <span>充值</span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<style lang='scss'>
@import "balance";
</style>
